import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { getCurrentInstance } from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import orderCreated from '@/orderSubPack/images/logistics/orderCreated.png';
import orderCreatedAct from '@/orderSubPack/images/logistics/orderCreatedAct.png';
import transport from '@/orderSubPack/images/logistics/transport.png';
import transportAct from '@/orderSubPack/images/logistics/transportAct.png';
import sendOut from '@/orderSubPack/images/logistics/sendOut.png';
import sendOutAct from '@/orderSubPack/images/logistics/sendOutAct.png';
import doneAct from '@/orderSubPack/images/logistics/doneAct.png';
import './index.scss';

const Logistics = ({ dispatch, orderStatusHis }) => {
  const [logisticsData, setLogisticsData] = useState([]);
  const urlParms = useRef(null);

  const getExpress = () => {
    let payload = {
      orderId: urlParms.current.orderId
    };
    if (urlParms.current.detailOrderId) {
      payload.logisticsId = urlParms.current.detailOrderId;
    }
    dispatch({
      type: 'order/expressQueryModel',
      payload: { ...payload },
    }).then((data) => {
      let list = JSON.parse(data.expressQueryResult);
      list.data && setLogisticsData(list.data);
    });
  };

  const getOrderStatusHis = () => {
    dispatch({
      type: 'order/getOrderStatusModel',
      payload: { orderId: urlParms.current.orderId },
    });
  };

  useEffect(() => {
    urlParms.current = getCurrentInstance().router.params;
    getOrderStatusHis();
    getExpress();
  }, []);

  let genDom = null,
    sendDom = null,
    transDom = null,
    doneDom = null;
  if (orderStatusHis && orderStatusHis.length > 0) {
    for (let i = 0; i < orderStatusHis.length; i++) {
      if (orderStatusHis[i].status == 5) {
        genDom = (
          <View className="item" key={'orderItem' + i}>
            <View className="left">
              <Image
                className="staIcon"
                src={orderStatusHis.length == 1 ? orderCreatedAct : orderCreated}
              />
            </View>
            <View className="right">
              <View className={['lable', orderStatusHis.length == 1 && 'cur'].join(' ')}>
                已下单
              </View>
              <View className="ttime bottom">{orderStatusHis[i].time}</View>
            </View>
          </View>
        );
      } else if (orderStatusHis[i].status == 6) {
        sendDom = (
          <View className="item" key={'orderItem' + i}>
            <View className="left">
              <Image className="staIcon" src={logisticsData.length == 0 ? sendOutAct : sendOut} />
              <View className="line last"></View>
            </View>
            <View className="right">
              <View className={['lable', logisticsData.length == 1 && 'cur'].join(' ')}>
                已发货
              </View>
              <View className="ttime">{orderStatusHis[i].time}</View>
            </View>
          </View>
        );
      } else if (orderStatusHis[i].status == 4) {
        doneDom = (
          <View className="item" key={'orderItem' + i}>
            <View className="left">
              <Image className="staIcon" src={doneAct} />
              <View className="line last"></View>
            </View>
            <View className="right">
              <View className="lable cur">已完成</View>
              <View className="ttime">{orderStatusHis[i].time}</View>
            </View>
          </View>
        );
      }
    }
    if (logisticsData.length > 0) {
      transDom = (
        <View className="item" key="logisticsItemLable">
          <View className="left">
            <Image className="staIcon" src={doneDom ? transport : transportAct} />
          </View>
          <View className="right">
            <View className={['lable', doneDom ? '' : 'cur'].join(' ')}>运输中</View>
          </View>
        </View>
      );
    }
  }

  return (
    <View className="logisticsPage">
      <View className="logisticsContent">
        {orderStatusHis && orderStatusHis.length == 0 ? (
          <View className="empty">
            <View className="emicon"></View>
            <View className="type">暂无数据</View>
          </View>
        ) : (
          <>
            {doneDom}
            {transDom}
            {logisticsData.length > 0 &&
              logisticsData.map((item, index) => (
                <View className="item" key={'logisticsItem' + index}>
                  <View className="left">
                    <View className="line"></View>
                    {index != 0 && <View className="cir"></View>}
                    <View className="line last"></View>
                  </View>
                  <View className="right">
                    <View className={['context', index == 0 && !doneDom && 'cur'].join(' ')}>
                      {item.context}
                    </View>
                    <View className="ttime">{item.time}</View>
                  </View>
                </View>
              ))}
            {sendDom}
            {genDom}
          </>
        )}
      </View>
    </View>
  );
};

export default connect(({ order }) => ({
  orderStatusHis: order.orderStatusHis,
}))(Logistics);
